// 消息类型
export type MessageType = 'success' | 'error' | 'warning' | 'info';

// 消息配置
export interface MessageConfig {
  message: string;
  type?: MessageType;
  duration?: number;
  showClose?: boolean;
}

// 创建消息元素
function createMessageElement(config: MessageConfig): HTMLElement {
  const messageEl = document.createElement('div');
  messageEl.className = `message message-${config.type || 'info'}`;
  
  const iconMap = {
    success: '✅',
    error: '❌',
    warning: '⚠️',
    info: 'ℹ️'
  };
  
  messageEl.innerHTML = `
    <div class="message-content">
      <span class="message-icon">${iconMap[config.type || 'info']}</span>
      <span class="message-text">${config.message}</span>
      ${config.showClose ? '<span class="message-close">×</span>' : ''}
    </div>
  `;
  
  // 添加样式
  messageEl.style.cssText = `
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  `;
  
  // 根据类型设置颜色
  const colorMap = {
    success: { bg: '#f0f9ff', border: '#10b981', text: '#065f46' },
    error: { bg: '#fef2f2', border: '#ef4444', text: '#991b1b' },
    warning: { bg: '#fffbeb', border: '#f59e0b', text: '#92400e' },
    info: { bg: '#f0f9ff', border: '#3b82f6', text: '#1e40af' }
  };
  
  const colors = colorMap[config.type || 'info'];
  messageEl.style.backgroundColor = colors.bg;
  messageEl.style.border = `1px solid ${colors.border}`;
  messageEl.style.color = colors.text;
  
  return messageEl;
}

// 显示消息
function showMessage(config: MessageConfig) {
  const messageEl = createMessageElement(config);
  document.body.appendChild(messageEl);
  
  // 动画显示
  setTimeout(() => {
    messageEl.style.opacity = '1';
    messageEl.style.transform = 'translateX(-50%) translateY(0)';
  }, 10);
  
  // 关闭按钮事件
  const closeBtn = messageEl.querySelector('.message-close');
  if (closeBtn) {
    closeBtn.addEventListener('click', () => {
      hideMessage(messageEl);
    });
  }
  
  // 自动关闭
  const duration = config.duration || 3000;
  if (duration > 0) {
    setTimeout(() => {
      hideMessage(messageEl);
    }, duration);
  }
  
  return messageEl;
}

// 隐藏消息
function hideMessage(messageEl: HTMLElement) {
  messageEl.style.opacity = '0';
  messageEl.style.transform = 'translateX(-50%) translateY(-20px)';
  
  setTimeout(() => {
    if (messageEl.parentNode) {
      messageEl.parentNode.removeChild(messageEl);
    }
  }, 300);
}

// 简单的消息提示工具
export const message = {
  success: (msg: string) => {
    console.log('✅ 成功:', msg);
    // 这里可以集成实际的UI消息组件，比如Element Plus的ElMessage
    alert('成功: ' + msg);
  },
  
  error: (msg: string) => {
    console.error('❌ 错误:', msg);
    alert('错误: ' + msg);
  },
  
  warning: (msg: string) => {
    console.warn('⚠️ 警告:', msg);
    alert('警告: ' + msg);
  },
  
  info: (msg: string) => {
    console.info('ℹ️ 信息:', msg);
    alert('信息: ' + msg);
  }
};

export default message; 